import { Carousel } from 'antd';
import React,{Component} from 'react';
import style from './style.less';

export  class  AutoPlay extends Component{
    constructor(){
        super();
        this.state={
            currentIndex:0
        };
    }
    render(){
        let mystyle = this.props.style||{}
        // console.log(this.props.children)
        return (
            <div   {...this.props} style={{ ...mystyle, position: 'relative' }} >
                <Carousel ref = {(ins)=>{
                    this.player = ins;
                }} afterChange = {(params)=>{
                    console.log(typeof params)
                    this.setState({currentIndex:params});
                }} style={{ width: '100%', height: '100%' }} dots={false} autoplay={true}>
                    {
                        this.props.children
                    }
                </Carousel>
                <div style={{
                    position: 'absolute',
                    zIndex: '200',
                    background: 'rgba(15,158,224,0.5)',
                    height: '30px', width: '100%',
                    bottom:0,left:0,
                    display:'flex',
                    alignItems:'center',
                    justifyContent:'center'
                }}>
                {
                    this.props.children&&this.props.children.map((value,index)=>{
                        console.log(index);
                        return (
                            <div className = {this.state.currentIndex === index?style.dotSelected:style.dot}
                            style = {{cursor:'pointer'}}
                            onClick = {
                                ()=>{
                                    this.player.goTo(index);
                                }
                            }
                            />
                        )
                    })
                }
                </div>
            </div>
        )
    }
}

// => {
//     let mystyle = props.style || {};
    
    // return (
    //     <div   {...props} style={{ ...mystyle, position: 'relative' }} >
    //         <Carousel style={{ width: '100%', height: '100%' }} dots={false} autoplay={true}>
    //             {
    //                 props.children
    //             }
    //         </Carousel>
    //         <div style={{
    //             position: 'absolute',
    //             zIndex: '200',
    //             background: 'rgba(15,158,224,0.5)',
    //             height: '30px', width: '100%',
    //             bottom:0,left:0,
    //             display:'flex',
    //             alignItems:'center',
    //             justifyContent:'center'
    //         }}>
    //             <div style = {{height:'10px',width:'10px',background:'#111',margin:5}} />
    //             <div style = {{height:'10px',width:'10px',background:'#111',margin:5}} />
    //             <div style = {{height:'10px',width:'10px',background:'#111',margin:5}} />
    //             <div style = {{height:'10px',width:'10px',background:'#111',margin:5}} />
    //         </div>
    //     </div>
    // )
// }